<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../utils/flexible.js"></script>
    <script src="../utils/getUrlParams.js"></script>
    <script src="../utils/debounce.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/brand.css">
    
</head>

<body>
    <div class="header" id="top">
        <img src="../assets/imgs/header_logo.png" alt="">
        <img src="../assets/imgs/header_app.png" alt="">
    </div>
    <div class="searchbox">
        <input type="text" placeholder="请输入你想比价的产品">
        <button>搜索</button>
    </div>

    <div class="nav">
        <a href="../index.html">首页</a> > <a class="categoryAll">全部分类</a> >
        <a class="replace" href="">电视</a> >
        <button>筛选</button>
    </div>

    <div class="container">
        <ul>
            
        </ul>
    </div>

    <div class="footer">
        <div class="more">
            <a>更多优惠信息>></a>
        </div>
        <div class="chart">
            <span>品牌排行</span>
        </div>
        <ul>
            <li>登入</li>
            <li>注册</li>
            <li><a href="#top">返回顶部</a></li>
        </ul>
        <p>手机APP下载 慢慢买手机版 -- 掌上比价平台</p>
        <p>m.manmanbuy.com</p>
    </div>


    <script>
        
        let href = {};
        let page;
        let flag = true;
        init();

        function init() {
            href = getUrlParams(location.href);
            page = 20;
            $(".nav .replace").attr("categoryid",href.brandtitleid).text(href.title);
            $(".categoryAll").click(function () {
                location.href = "./brandtitle.html";
            })
            ajax();
            $(window).on("scroll",scrollHandler);
        }

        function scrollHandler(e) {
            // console.log($(window).scrollTop());
            // console.log($("html").height());
            // console.log($("html")[0].clientHeight);
            if($("html").height()-$(window).scrollTop()-$("html")[0].clientHeight<600){
                if(flag){
                     page += 10;
                    ajax();
                }
                 flag = false;
               
            }else{
                flag = true;
            }
        }

        function ajax() {
            $.ajax({
                url: "http://chst.vip:1234/api/getbrandproductlist",
                data: {
                    brandtitleid: href.brandtitleid,
                    pagesize: page
                }
            }).then(res => {
                console.log(res);
                creatLi(res.result);
                $(".container >ul").on("click","li",clickLihandler)
                
            })
        }

        function clickLihandler(e) {
            let productid = $(this).attr("productid");
            let productname = $(this).find("p").first().text().trim();
            let categoryid = $(".nav .replace").attr("categoryid")
            let categoryname = $(".nav .replace").text();
            console.log(categoryid,categoryname,productid,productname);
            location.href = "./productdetails.html?productid=" + productid + "&productname="+productname.split(" ")[0]+"&categoryname="+categoryname + "&categoryid=" +categoryid;
        }


        function creatLi(data) {
            let html = "";
            data.forEach(item => {
                html += `
                <li productid="${item.productId}">
                    ${item.productImg}
                    <div class="right">
                        <p>
                            ${item.productName}
                        </p>
                        <p>${item.productPrice}</p>
                        <span>${item.productQuote}</span> <span>${item.productCom}</span>
                    </div>
                </li>
                `;
            });
            $(".container ul").html(html);
            console.log(href);
        }
    </script>
</body>

</html>